<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script type="text/javascript" src="resources/js/jquery-3.1.0.min.js"></script>
  <style type="text/css">

    * {
      margin: 0;
      padding: 0;
    }

    .nav{
      height: 40px;
    }

    .commonwidth {
      height: 100%;
      margin: auto;
      width: 600px;
      border-bottom: chocolate solid 5px;
    }

    .menuf li{
      float: left;
      list-style: none;
    }

    a{
      line-height: 40px;
      display: block;
      padding:0 10px;
      text-decoration: none;
      background-color: #999;
      color: black;
    }

    a:hover{
      background-color: chocolate;
      color: white;
    }

    .menus li{
      float: none;
    }

    .menuf+{
      float: none;
    }

    .menus a{
      background-color: chocolate;
      color: white;
    }

    .menus+{
      position: relative;
    }

    .menut{
      position: absolute;
      left: 80px;
      top:0;
    }

  </style>
</head>
<body>

  <div class="nav">
    <div class="commonwidth">
      <ul class="menuf">
        <li>
          <a href="">首页</a>
        </li>
        <li>
          <a href="">课程大厅</a>
        </li>
        <li  class="menuf+">
          <a href="">学习中心+</a>
          <ul class="menus">
            <li class="menus+">
              <a href="">前端课程+</a>
              <ul class="menut">
                <li>
                  <a href="">javascript</a>
                </li>
                <li>
                  <a href="">css</a>
                </li>
                <li>
                  <a href="">jQuery</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="">手机开发</a>
            </li>
            <li>
              <a href="">后台编程</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">关于我们</a>
        </li>
      </ul>
    </div>
  </div>

</body>
</html>
